<template>
	<view class="content">
		<view class="steps">
			<uni-steps :options="list" :active="active" active-color="#07c160" />
		</view>

		<view class="tags_nav">
			<view v-if="active == 0" class="example">
				<uni-forms ref="valiForm" label-align="left" :modelValue="formData.formVal" label-width="100px">
					<uni-forms-item label="药品名称" required name="name">
						<uni-easyinput v-model="formData.formVal.name" placeholder="请输入药品名称" />
					</uni-forms-item>
					<uni-forms-item label="生产厂家" required name="manufacturer">
						<uni-easyinput v-model="formData.formVal.manufacturer" placeholder="请输入生产厂家" />
					</uni-forms-item>
					<uni-forms-item label="规格" required name="specification">
						<uni-easyinput v-model="formData.formVal.specification" placeholder="请输入规格" />
					</uni-forms-item>
					<uni-forms-item label="药品类型" required name="category">
						<uni-data-select v-model="formData.formVal.category" :localdata="GetValueList"
							@change="change"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="零售价" required name="retailPrice">
						<view class="rows">
							<uni-easyinput v-model="formData.formVal.retailPrice" placeholder="请输入零售价" />
							<text style="margin: 0 8rpx;">
								元
							</text>
							<uni-data-select style="width: 30%;" v-model="formData.formVal.unit"
								:localdata="unitFrquSelector" @change="change"></uni-data-select>
						</view>
					</uni-forms-item>
					<uni-forms-item label="剂型" name="dosageForm">
						<uni-data-select v-model="formData.formVal.dosageForm" :localdata="dosformSelector"
							@change="change"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="条形码" name="barcode">
						<uni-easyinput v-model="formData.formVal.barcode" placeholder="请输入条形码" />
					</uni-forms-item>
					<uni-forms-item label="批准文号" name="approvalNumber">
						<uni-easyinput v-model="formData.formVal.approvalNumber" placeholder="请输入批准文号" />
					</uni-forms-item>
					<uni-forms-item label="自定义编码" name="ItemNo">
						<uni-easyinput v-model="formData.formVal.ItemNo" placeholder="请输入自定义编码" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view v-if="active == 1" class="example">
				<view class="infoMain">
					<uni-forms ref="valiForm" label-align="left" :modelValue="formData.formVal.openingInventory"
						label-width="100px">
						<uni-forms-item label="供应商" name="supplierId">
							<uni-data-select v-model="formData.formVal.openingInventory.supplierId"
								:localdata="supplierSelector" @change="change"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="初始库存" name="inventory">
							<uni-easyinput v-model="formData.formVal.openingInventory.inventory"
								placeholder="请输入初始库存" />
						</uni-forms-item>
						<uni-forms-item label="生产批号" name="batchNumber">
							<uni-easyinput v-model="formData.formVal.openingInventory.batchNumber"
								placeholder="请输入生产批号" />
						</uni-forms-item>
						<uni-forms-item label="失效日期" name="expiryDate">
							<uni-datetime-picker type="date" v-model="formData.formVal.openingInventory.expiryDate"
								@change="changeLog" />
						</uni-forms-item>
						<uni-forms-item label="成本价" name="costPrice">
							<uni-easyinput v-model="formData.formVal.openingInventory.costPrice" placeholder="请输入成本价" />
						</uni-forms-item>
					</uni-forms>
				</view>

			</view>
			<view v-if="active == 2" class="example">
				<uni-forms ref="valiForm" label-align="left" :modelValue="formData.formVal" label-width="100px">
					<uni-forms-item label="库存预警" name="inventoryMin">
						<uni-easyinput v-model="formData.formVal.inventoryMin" placeholder="请输入库存" />
					</uni-forms-item>
					<uni-forms-item label="有效期预警" name="validityWarning">
						<uni-data-select v-model="formData.formVal.validityWarning" :localdata="timeData"
							@change="change"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="是否药基" name="batchNumber">
						<uni-data-checkbox v-model="formData.formVal.isBasicMedicine"
							:localdata="sex1"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="是否含麻" name="batchNumber">
						<uni-data-checkbox v-model="formData.formVal.isContainsEphedrine"
							:localdata="sex2"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="是否处方" name="batchNumber">
						<uni-data-checkbox v-model="formData.formVal.isRx" :localdata="sex3"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="是否进口" name="batchNumber">
						<uni-data-checkbox v-model="formData.formVal.isImport" :localdata="sex4"></uni-data-checkbox>
					</uni-forms-item>

				</uni-forms>


			</view>
		</view>

		<view class="footer">
			<button v-if="active === 0" @click="clone('00')">
				取消
			</button>
			<button v-if="active !== 0" @click="clone('11')">
				上一步
			</button>
			<button v-if="active !== 2" type="primary" @click="submit('valiForm')">
				下一步
			</button>

			<button v-if="active === 2" type="primary" @click="onPharmacyAdd('valiForm')">
				完成
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
	} from "vue";

	import {
		pharmacyAdd
	} from "./request.js"

	import getOptions from "@/utils/options/getSelectList.js"

	let supplierSelector = ref([])
	getOptions('supplierSelector', supplierSelector).then((res) => {
		supplierSelector.value = res
	})

	let dosformSelector = ref([])
	getOptions('dosformSelector', dosformSelector).then((res) => {
		dosformSelector.value = res
	})

	let GetValueList = ref([])
	getOptions('GetValueList', GetValueList, ['DRUGTYPE'], 'post').then((res) => {
		GetValueList.value = res
	})


	let unitFrquSelector = ref([])
	getOptions('unitFrquSelector', unitFrquSelector).then((res) => {
		unitFrquSelector.value = res
	})



	const active = ref(0)
	const formData = reactive({
		formVal: {
			name: "",
			manufacturer: "",
			specification: "",
			category: "",
			retailPrice: "",
			unit: "",
			dosageForm: "",
			barcode: "",
			approvalNumber: "",
			ItemNo: "",
			openingInventory: {
				supplierId: "",
				supplierName: "0",
				inventory: "",
				batchNumber: "",
				expiryDate: "",
				costPrice: ""
			},
			inventoryMin: "",
			validityWarning: "",
			isBasicMedicine: false,
			isContainsEphedrine: false,
			isRx: false,
			isImport: false,
		}

	})

	const sex1 = ref([{
		text: '是',
		value: true
	}, {
		text: '否',
		value: false
	}])
	const sex2 = ref([{
		text: '是',
		value: true
	}, {
		text: '否',
		value: false
	}])
	const sex3 = ref([{
		text: '是',
		value: true
	}, {
		text: '否',
		value: false
	}])
	const sex4 = ref([{
		text: '是',
		value: true
	}, {
		text: '否',
		value: false
	}])
	const list = ref(
		[{
			title: '基础信息'
		}, {
			title: '库存信息'
		}, {
			title: '补充信息'
		}]
	)


	const infoMain = reactive({
		infoList: [{
			text: "",

		}]
	})

	const timeData = ref([{
			value: 1,
			text: "1月"
		},
		{
			value: 2,
			text: "2月"
		},
		{
			value: 3,
			text: "3月"
		},
		{
			value: 4,
			text: "4月"
		},
		{
			value: 5,
			text: "5月"
		},
		{
			value: 6,
			text: "6月"
		},
		{
			value: 99,
			text: "一年"
		},
	])

	const change = () => {}

	const clone = (e) => {
		if (e === '00') {
			uni.switchTab({
				url: '/pages/index/index'
			})

		} else {
			active.value -= 1
		}
	}
	const submit = (ref) => {
		if (active.value >= 2) return
		active.value += 1
	}

	const changeLog = () => {
		console.log(formData)
	}

	const onPharmacyAdd = () => {
		pharmacyAdd(formData.formVal).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: "添加成功",
					icon: 'success',
					duration: 2000,
				})

				// uni.switchTab({
				// 	url: '/pages/index/index',
				// })
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error',
					duration: 2000,
				})
			}
		})
	}
</script>

<style lang="scss">
	.content {
		padding-top: 10rpx;
	}

	.footer {
		position: fixed;
		bottom: 10rpx;
		left: 0;
		right: 0;
		padding: 6rpx;
		display: flex;
		justify-content: space-between;

		button {
			margin: 0 6px;
			width: 50%;
		}
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.rows {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>